<template>
	<view class="page">
		<!-- 	<view class="totap">
			<image style="width: 2rem;height: 2rem;" @tap="openscan" src="../../../static/home/scan2.png"
				mode="aspectFit"></image>
		</view> -->
		<view class="flex-container flex-center" style="background-color: #ff0820;">
			<uni-search-bar placeholder="请搜索" style="width: 100%;" cancelButton="none" radius="100" @confirm="search"
				v-model="searchValue" @input="input" @cancel="cancel" @clear="clear">
			</uni-search-bar>
			<!-- #ifdef APP -->
			<image style="width: 2rem;height: 2rem;margin-right: 0.3rem;" @tap="openscan"
				src="../../../static/home/scan1.png" mode="aspectFit"></image>
			<!-- #endif -->


		</view>
		<u-tabs :activeStyle="{color: '#f9f9f9',fontSize:'1rem',fontWeight: 'bold'}" :inactiveStyle="{
						color: '#f9f9f9',
						transform: 'scale(1)'
					}" lineColor="#ffffff" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;color:#ffffff"
			style="background-color: #ff0820;" :list="list1" @click="changetab"></u-tabs>

		<view class="flex-container j-start flex-center"
			style="margin: 1rem auto;flex-wrap: wrap;background-color:#ffffff">
			<view class="ding1" @click="handleClick('goyu')">
				<view class="img">
					<image class="p-image" src="../../../static/my/u1.png" mode="scaleToFill"></image>
				</view>
				<text>预约</text>
			</view>
			<view class="ding1" @click="handleClick('goWait')">
				<view class="img">
					<image class="p-image" src="../../../static/my/u2.png" mode="scaleToFill"></image>
				</view>
				<text>金币</text>
			</view>
		<!-- 	<view class="ding1">
				<view class="img">
					<image class="p-image" src="../../../static/my/u3.png" mode="scaleToFill"></image>
				</view>

				<text></text>
			</view> -->

		</view><u-swiper :list="swiper" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
			bgColor="#ffffff"></u-swiper>
		<view class="box" style="margin-top: 1rem;width: 100%;position: relative;">
			<u-scroll-list @right="right" @left="left">
				<view class="scroll-list" style="flex-direction: row;    padding-top: 1rem;">
					<view class="scroll-list__goods-item" v-for="(item, index) in shoplist" :key="index"
						:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']">
						<image class="scroll-list__goods-item__image" :src="item.imageUrl.split(',')[0]"></image>
						<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
					</view>
					<view class="scroll-list__show-more">
						<text class="scroll-list__show-more__text">查看更多</text>
						<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
					</view>
				</view>
			</u-scroll-list>

		</view>
		<view class="waterfall-container">
			<view v-for="(item, index) in products" class="waterfall-item">
				<!-- 商品内容 -->
				<view class="item-content" @click="godetil(item.wine_id,item.promotion_id)">
					<image :src="item.image_url.split(',')[0]" mode="widthFix"></image>
					<view class="flex-container j-sbe flex-center"><text
							style="font-size: 1.5rem;color:red;">{{ item.price.toFixed(2) }}$</text><text
							style="margin-left: 1rem;">{{ item.w_name }}</text></view>
					<text
						style="border: 1px solid red;width: auto;font-size: 0.3rem;color: #ff0820;padding: 2px;">{{ item.name }}</text>
					<view class="ob"><text>产地:{{ item.origin }}</text><text
							style="margin-left: 0.3rem;">{{item.volume_ml}}</text>ml</view>
					<text class="ob">{{ item.type }}</text>
					<view class="ob">
						生产年份:{{item.vintage_year}}
					</view>
					<!-- 其他商品信息 -->
				</view>
			</view>
		</view>
		<u-back-top top="400" icon="arrow-up" :right="backTopData.right" :customStyle="backTopData.customStyle"
			:bottom="backTopData.bottom" :icon="backTopData.icon" :mode="backTopData.mode"
			:iconStyle="backTopData.iconStyle" :duration="backTopData.duration" :scrollTop="scrollTop"
			@click="backToTop()"></u-back-top>
		<tab-bar :current='0'></tab-bar>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				scrollTop:0,
				backTopData: {
					mode: 'circle',
					icon: 'arrow-upward',
					bottom: 100,
					customStyle: {
						backgroundColor: '#cecece',
					},
					iconStyle: {
						color: "#ffffff",
					},
					right: 20,
					duration: 300
				},
				heights: [],
				products: [

				],
				shoplist: [],
				searchValue: '',
				list1: [{

					name: '全部',
				}],
				swpr: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				swiper: [

				],
				pageNo: 1, // 当前页数
				pageSize: 10, // 每页加载数量
				loadingMore: false, // 是否正在加载更多数据
				categoryId: null,
				name: ""
			}
		},
		created() {
			this.getTabtype()
		},
		onPageScroll(e) {
			this.scrollTop=e.scrollTop
		},
		mounted() {
			this.getWinactive()
			this.cswiper()
			this.cslist()
		},
		onReachBottom() {
			// 上拉触底加载更多
			if (!this.loadingMore) {
				this.loadingMore = true;
				this.pageNo++
				this.getWinactive();
			}
		},

		methods: {
			backToTop() {
				// 设置 scrollTop 为 0，页面会滚动到顶部
				this.scrollTop = 0;
			},
			checkToken() {
				// 从 Vuex 中获取用户信息
				const token = uni.getStorageSync('token')

				// 检查用户信息中是否包含 token
				if (!token) {
					// 如果 token 不存在或为空，则显示登录提示
					uni.showModal({
						title: '提示',
						content: '请登录后再进行操作',
						confirmText: '去登录',
						success: (res) => {
							if (res.confirm) {
								// 用户点击了确认按钮，跳转至登录页面
								this.goToLogin();
							}
						},
					});
					return false;
				}
				return true;

			},
			handleClick(action, wineId, promotionId) {

				// 检查用户是否已登录
				if (!this.checkToken()) {
					// 如果用户未登录，则不执行后续操作
					return;
				}

				// 如果已登录，则根据不同的操作执行相应的操作
				switch (action) {
					case 'godetil':
						this.godetil(wineId, promotionId);
						break;
					case 'goyu':
						this.goyu()
						break;
					default:
						break;
				}
			},
			// 用户点击某个控件事件处理
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/index', // 前往登录页的路径，请根据实际情况修改
				});
			},
			async getTabtype() {

				const param = {
					current: 1,
					size: 10
				}
				const res = await this.$request.get('/system/wine-category/list', param)
				console.log(res);
				if (res.code == 200) {

					this.list1 = this.list1.concat(res.data.list.records);

				}


			},
			async getWinactive() {
				this.loadingMore = true;
				const param = {
					current: this.pageNo,
					size: this.pageSize

				}
				if (this.name) {
					param.name = this.name;
				}

				// 如果 categoryId 不为空，添加到参数中
				if (this.categoryId) {
					param.categoryId = this.categoryId;
				}
				const res = await this.$request.get('/system/winepromotion/list', param)
				console.log(res);

				if (res.code == 200) {
					if (this.pageNo === 1) {
						this.products = res.data.list.records;
					} else {
						this.products = this.products.concat(res.data.list.records);
					}

					// 加载完成，重置 loadingMore 状态
					this.loadingMore = false;
				}


			},
			handleImageLoad(index) {
				// 图片加载完成后获取图片的高度，并更新数据中的 imageHeight
				const img = this.$refs[`img-${index}`];
				if (img) {
					this.$set(this.items, index, {
						...this.items[index],
						imageHeight: img.height
					});
				}
			},
			async cswiper(e) {
				const param = {
					current: 1,
					size: 5
				}
				const res = await this.$request.get('/system/promotion/list', param)
				console.log(res);
				if (res.code == 200) {
					const dat = res.data.list.records
					for (let y in dat) {

						this.swiper.push(dat[y].imgUrl)

					}

				}
			},
			async cslist(e) {
				const param = {
					current: 1,
					size: 10
				}
				const res = await this.$request.get('/system/wine/list', param)
				console.log(res);
				if (res.code == 200) {
					this.shoplist = res.data.list.records;
					console.log(this.shoplist, 'jjjjjj');
				}
			},
			openscan() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			godetil(wineId, promotionId) {
				uni.navigateTo({
					url: `/pages/tabBar/home/teb?wineId=${wineId}&promotionId=${promotionId}`
				})
			},
			changetab(item) {
				console.log(item);
				this.products = []
				this.pageNo = 1
				if (item.categoryId) {
					this.categoryId = item.categoryId
				} else {
					this.categoryId = null
				}
				this.getWinactive()
			},
			search(res) {
				this.name = res.value
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {

			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			goyu() {
				uni.switchTab({
					url: '/pages/tabBar/yuyue/yuyue'
				})
			},
			goQrcode() {
				uni.navigateTo({
					url: '/pages/tabBar/my/qrcodepy/qrcodepy'
				})
			},
			goadderss() {
				uni.navigateTo({
					url: '/pages/tabBar/adderss/adderss'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.uni-app--showleftwindow+.uni-tabbar-bottom {
		display: none;
	}

	.ding1 {
		padding: 1rem 0;
		text-align: center;
		margin-left: 1.5rem;
		margin-right: 1.5rem;
		margin-bottom: 0.2rem;

		/* 换行 */
		.img {
			width: 1.5rem;
			height: 1.5rem;
			margin: 0 auto;
			margin-bottom: 1rem;

		}

		text {
			font-size: 0.6rem;
			color: #474747;
			text-align: center;


		}
	}

	.cels {
		width: 80rem;
		height: auto;
		border-radius: 0.6rem;
		border: 1px solid #d0d0d0;
		margin: 0rem 1rem;

		.bans {
			font-size: 0.2rem;
			text-align: center;
		}

		&-item {
			height: 4.6rem;
			border-top-right-radius: 0.6rem;
			border-top-left-radius: 0.6rem;
			background-color: #ff55ff;
		}
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;
			display: flex;
			flex-direction: column;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}


	.waterfall-container {
		column-count: 2;
		-moz-column-count: 2;
		-webkit-column-count: 2;
		/*规定列之间的间隔 兼容*/
		column-gap: 5rpx;
		padding: 10rpx;
		-moz-column-gap: 10rpx;
		-webkit-column-gap: 10rpx;

		.waterfall-item {
			margin-bottom: 30rpx;
			break-inside: avoid;
		}

		.item-content {
			background-color: #ffffff;
			/* 商品容器背景色 */
			/* 内边距，可以根据需要调整 */
			border-radius: 8px;
			/* 圆角，可以根据需要调整 */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			padding: 0.5rem 0.5rem;

			/* 添加溢出隐藏，确保容器能够包裹图片 */
			// 	/* 阴影效果，可以根据需要调整 */
			image {
				width: 100%;

				object-fit: cover;
				border-radius: 4px;
				/* 商品图片圆角，可以根据需要调整 */
			}

			.ob {
				margin-top: 0.3rem;
				font-size: 0.8rem;
				color: #84827c;
			}
		}

	}
</style>